<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>记忆翻牌小游戏</title>
  <style>
    body {
      background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
      font-family: 'Segoe UI', 'Arial', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }
    h1 {
      margin-top: 40px;
      color: #333;
      letter-spacing: 2px;
    }
    #game-board {
      display: grid;
      grid-template-columns: repeat(4, 80px);
      grid-gap: 15px;
      margin: 40px 0;
      background: rgba(255,255,255,0.7);
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    }
    .card {
      width: 80px;
      height: 80px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: #fff;
      cursor: pointer;
      position: relative;
      transition: transform 0.2s;
      user-select: none;
      perspective: 600px;
    }
    .card.flipped .front {
      transform: rotateY(0deg);
    }
    .card.flipped .back {
      transform: rotateY(180deg);
    }
    .front, .back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      transition: transform 0.3s;
    }
    .front {
      background: #4facfe;
      color: #fff;
      transform: rotateY(180deg);
    }
    .back {
      background: #43e97b;
      color: #fff;
      transform: rotateY(0deg);
    }
    #restart-btn {
      padding: 10px 28px;
      font-size: 1rem;
      background: #43e97b;
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      transition: background 0.2s;
    }
    #restart-btn:hover {
      background: #38d39f;
    }
    #moves {
      margin-bottom: 10px;
      color: #333;
      font-size: 1.1rem;
    }
    #message {
      color: #e67e22;
      font-size: 1.2rem;
      margin-bottom: 10px;
      min-height: 24px;
    }
  </style>
</head>
<body>
  <h1>记忆翻牌小游戏</h1>
  <div id="moves">步数：0</div>
  <div id="message"></div>
  <div id="game-board"></div>
  <button id="restart-btn">重新开始</button>

  <script>
    // 卡片内容，可以用emoji或图片，这里用emoji
    const icons = ['🍎','🍌','🍇','🍉','🍓','🍒','🍋','🥝'];
    let cards = [];
    let flippedCards = [];
    let matched = 0;
    let moves = 0;
    const board = document.getElementById('game-board');
    const movesDiv = document.getElementById('moves');
    const messageDiv = document.getElementById('message');
    const restartBtn = document.getElementById('restart-btn');

    // 初始化游戏
    function initGame() {
      // 生成两份卡片并打乱
      cards = shuffle([...icons, ...icons]);
      board.innerHTML = '';
      flippedCards = [];
      matched = 0;
      moves = 0;
      movesDiv.textContent = '步数：0';
      messageDiv.textContent = '';
      // 创建卡片元素
      cards.forEach((icon, idx) => {
        const card = document.createElement('div');
        card.classList.add('card');
        card.dataset.index = idx;
        card.innerHTML = `
          <div class="front">${icon}</div>
          <div class="back">?</div>
        `;
        card.addEventListener('click', onCardClick);
        board.appendChild(card);
      });
    }

    // 洗牌算法
    function shuffle(arr) {
      for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
      return arr;
    }

    // 卡片点击事件
    function onCardClick(e) {
      const card = e.currentTarget;
      const idx = card.dataset.index;
      // 已经翻开或已配对的卡片不能再点
      if (card.classList.contains('flipped') || flippedCards.length === 2) return;
      card.classList.add('flipped');
      flippedCards.push({card, idx});
      if (flippedCards.length === 2) {
        moves++;
        movesDiv.textContent = `步数：${moves}`;
        checkMatch();
      }
    }

    // 检查是否配对
    function checkMatch() {
      const [first, second] = flippedCards;
      if (cards[first.idx] === cards[second.idx]) {
        // 配对成功
        matched += 2;
        flippedCards = [];
        if (matched === cards.length) {
          messageDiv.textContent = `恭喜你完成游戏！总步数：${moves}`;
        }
      } else {
        // 配对失败，0.8秒后翻回去
        setTimeout(() => {
          first.card.classList.remove('flipped');
          second.card.classList.remove('flipped');
          flippedCards = [];
        }, 800);
      }
    }

    // 重新开始按钮
    restartBtn.addEventListener('click', initGame);

    // 页面加载时初始化
    window.onload = initGame;
  </script>
</body>
</html>
